
<template>
  <div class="main">
    <h1>留言列表</h1>
    <div class="postedmessage">
      <div v-for="(shortmes, index) in $store.state.shortmes.shortmeses" :key="index">
        <div>{{ shortmes.content }}</div>
        <p>{{ shortmes.createTime }}</p>
      </div>
    </div>
    <shortmes-form @create="create"/>
  </div>
</template>

<script>
import axios from '~/plugins/axios';
import domain from '~/plugins/domain';
import ShortmesForm from '~/components/ShortmesForm.vue';

export default {
  layout:'index',
  components:{
    ShortmesForm
  },
  async fetch ({ store, params }) {
    let shortmeses = (await axios.get('/shortmes')).data;
    store.commit('shortmes/init', shortmeses);
  },
  methods:{
    async create(content){
      if(content.length > 0 && content.length < 101){
        const data = await domain.create("Shortmes",{content});
        this.$store.commit("shortmes/create", {content});
      }else{
        alert("留言不得为空，且长度在100字以内。" );
      }
    }
  },

}
</script>

<style scoped>
  .postedmessage {
    height: 1200px;
    overflow: auto;
  }
  .postedmessage > div {
    height: 250px;
    border: 0px;
    margin-bottom: 40px;
    background-image: url(/images/bgimg_r.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
  }
  .postedmessage > div > div {
    padding: 40px 150px;
    margin: 0px;
    text-align: left;
    white-space:pre-line;
    word-break: break-all;
    word-wrap: break-word;
  }
  .postedmessage > div > p {
    margin: 0px;
    position: absolute;
    right: 120px;
    bottom: 30px;
  }

</style>
